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Creating  animation  in  Adobe  Flash  CS4 

Overview  of  tweening 

A  tween  is  an  animation  you  create  by  specifying  a  value  for  an  object  property  in  one  frame  and  another  value  for 
that  same  property  in  another  frame.  Adobe  Flash  calculates  the  values  for  that  property  between  those  two  frames. 
The  term  tween  comes  from  the  phrase  in  between.  You  can  tween  movie  clip,  graphic,  and  button  symbols  and  text 
fields. 

A  tween  span  is  a  group  of  frames  in  the  Timeline  in  which  an  object  on  the  Stage  can  have  one  or  more  properties 
changed  over  time.  A  tween  span  appears  in  the  Timeline  as  a  group  of  frames  in  a  single  layer  with  a  blue  or  green 
background.  You  can  select  a  tween  span  as  a  single  object  and  drag  it  from  one  location  in  the  Timeline  to  another, 
including  to  another  layer.  Only  one  object  on  the  Stage  can  be  animated  in  each  tween  span.  This  object  is  called 
the  target  object  of  the  tween  span. 

A  property  keyframe  is  a  frame  within  a  tween  span  where  you  explicitly  define  one  or  more  property  values  for  the 
tween  target  object.  Each  property  you  define  has  its  own  property  keyframes.  If  you  set  more  than  one  property  in  a 
single  frame,  the  property  keyframes  for  each  of  those  properties  reside  in  that  frame.  You  can  view  each  property  of 
a  tween  span  and  its  property  keyframes  in  the  Motion  Editor.  You  can  also  choose  which  types  of  property 
keyframes  to  display  in  the  Timeline  from  the  tween  span  context  menu. 

Note:  Beginning  with  Adobe  Flash  Professional  CS4,  the  concepts  of  keyframe  and  property  keyframe  differ  from 
earlier  versions  of  Flash.  The  term  keyframe  refers  to  a  frame  in  the  Timeline  in  which  a  symbol  instance  appears  on 
the  Stage  for  the  first  time.  The  term  property  keyframe ,  new  to  Flash  CS4,  refers  to  a  value  defined  for  a  property  at 
a  specific  time  or  frame  in  a  motion  tween. 

Types  of  Flash  CS4  Animation 

Motion  tweens:  Set  properties  for  an  object,  such  as  position  and  alpha  transparency  in  one  frame  and  again  in 
another  frame,  and  Flash  interpolates  the  property  values  of  the  frames  in  between.  Motion  tweens  are  useful  for 
animation  that  consists  of  continuous  motion  or  transformation  of  an  object.  Motion  tweens  appear  in  the  Timeline 
as  a  contiguous  span  of  frames  you  can  select  as  a  single  object  by  default.  Motion  tweens  are  powerful  and  simple 
to  create. 

Shape  tweening:  Draw  a  shape  at  one  frame  in  the  Timeline  and  change  that  shape  or  draw  another  shape  at  another 
frame.  Flash  then  interpolates  the  intermediate  shapes  for  the  frames  in  between,  creating  the  animation  of  one  shape 
morphing  into  another. 

Classic  tweens:  Like  motion  tweens  but  more  complex  to  create.  You  can  create  some  specific  animated  effects  not 
possible  with  span-based  tweens.  For  example,  you  can  apply  eases  to  the  groups  of  frames  between  the  keyframes 
within  the  tween  instead  of  across  the  entire  length  of  a  motion  tween  span.  (To  ease  only  specific  frames  of  a 
motion  tween,  you  must  create  a  custom  ease  curve.)  You  can  also  use  classic  tweens  to  animate  between  two  color 
effects,  such  as  tint  and  alpha  transparency,  while  motion  tweens  can  apply  only  one  color  effect  per  tween. 

Inverse  kinematic  poses:  You  can  stretch  and  bend  shape  objects  and  link  groups  of  symbol  instances  to  make  them 
move  together  in  naturalistic  ways.  If  you  position  the  shape  object  or  linked  instances  in  different  ways  in  separate 
frames,  Flash  interpolates  the  positions  in  the  frames  in  between.  Inverse  kinematics  poses  help  make  character 
animation  quick  and  easy. 

Note:  You  will  learn  more  about  how  to  use  inverse  kinematics  poses  to  create  character  animations  in  Activity  5.4. 

Motion  tweens 

You  apply  motion  tweens  only  to  symbol  instances  and  text  fields.  All  other  object  types  are  wrapped  in  a  symbol 
when  a  tween  is  applied  to  them.  The  symbol  instance  can  contain  nested  symbols,  which  can  themselves  be 
tweened  on  their  own  timelines. 
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The  minimal  building  block  in  a  tween  layer  is  a  tween  span,  which  can  contain  only  one  symbol  instance.  The 
symbol  instance  is  called  the  target  instance  of  the  tween  span.  If  you  add  a  second  symbol  to  the  tween  span,  the 
new  symbol  replaces  the  original  one.  You  can  change  the  target  object  of  a  tween  by  dragging  a  different  symbol 
from  the  library  onto  the  tween  span  in  the  Timeline.  You  can  delete  the  symbol  from  a  tween  layer  without 
removing  or  breaking  the  tween. 

To  have  a  symbol  in  the  Timeline,  you  do  not  have  to  include  more  than  one  property  keyframe.  You  can  edit 
individual  property  keyframes  on  the  Stage,  in  the  Property  inspector,  or  in  the  Motion  Editor. 


To  create  a  motion  tween: 


1.  Start  Flash  and  open  a  new  blank  document. 

2.  Draw  a  shape  on  the  Stage. 

The  shape  appears  in  keyframe  1  of  Layer  1 . 

3.  Using  the  Selection  Tool  (Figure  1),  select  the  shape 
and  choose  Modify  >  Convert  To  Symbol.  Double-click 
to  select  the  shape  and  border,  if  present. 

The  Convert  To  Symbol  dialog  box  appears  (Figure  2). 

Note:  You  cannot  apply  motion  tweens  to  shapes. 
Applying  a  motion  tween  to  a  shape  automatically 
converts  the  shape  to  a  symbol. 

4.  Type  a  new  name  for  the  symbol  in  the  Name  text  box, 
select  the  Graphic  option,  and  click  OK  (Figure  2). 

5.  Select  frame  10. 

6.  Select  Insert  >  Timeline  >  Frame.  (The  motion  tween 
will  last  for  10  frames.) 
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Figure  1  Flash  toolbars  with  Selection  tool 
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When  you  insert  a  frame,  Flash  fills  the  area  between  the 
last  frame  (on  the  current  layer)  and  the  new  frame  with 
the  same  content  (Figure  3).  Frames  1  through  10  all 
contain  the  new  symbol. 

7.  Make  sure  frame  10  (the  end  frame  for  the  motion 
tween)  is  selected  and  select  Insert  >  Motion  Tween. 

8.  Select  the  symbol  in  frame  10;  then  make  one  or  more  of 
the  following  changes: 

Color  change:  In  the  Property  inspector,  select  Tint 
from  the  Color  Effect  Style  pop-up  menu  (Figure  4). 
Select  100%  for  the  Tint  Amount  and  change  the  color 
in  the  color  box. 

Fading:  In  the  Property  inspector,  select  Alpha  from  the 
Color  Effect  Style  pop-up  menu.  Reduce  the  percentage 
of  the  Alpha  Amount  for  more  transparency.  For 
example,  an  Alpha  value  of  0%  makes  the  object 
disappear. 

Position:  Use  the  Selection  tool  to  move  the  object  to  a 
different  position  on  the  Stage.  A  motion  path  appears. 
The  points  on  this  motion  path  are  editable. 


Figure  2  Convert  To  Symbol  dialog  box 
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Figure  3  Inserted  keyframe 


^  COLOR  EFFECT 


Style:  Int 


Tint: 


Red: 


Green:  l— l 


O 


Color  styles 


=0= 


203 


0 


Blue: 


0 


Figure  4  Color  pop-up  menu 
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Size:  Select  the  object.  Then  select  Modify  > 

Transform  >  Free  Transform.  Drag  the  object  handles  to 
increase  size,  decrease  size,  and  rotate  the  object. 

9.  Select  frame  1  on  the  Timeline. 

In  the  Timeline,  the  motion  tween  is  represented  by  a 
solid  blue  background  running  from  the  start  keyframe 
to  the  end  keyframe  (Figure  5). 

10.  With  the  Timeline  selected,  (Figure  6),  adjust  one  or 
more  properties  of  the  Motion  tween  from  the  Properties 
panel. 

•  Ease:  Controls  how  fast  the  object  starts  or  ends  the 
motion  tween.  For  example,  a  high  number  makes 
an  object  begin  tweening  quickly  and  end  slowly. 

•  Rotate:  Rotates  the  object  clockwise  or 
counterclockwise  a  designated  number  of  times. 

•  Path:  If  you  add  a  guide  layer,  the  object  is  linked 
to  the  path  drawn  on  the  guide  layer. 

•  Options :  Starts  and  stops  the  tweening  of  all  objects 
on  the  Stage  at  the  same  time. 

11.  You  can  also  use  the  Motion  Editor  to  adjust  tweens 

(Figure  7). 

You  can  view  all  tween  properties  and  their  property 
keyframes  in  the  Motion  Editor.  You  can  also  add 
precision  and  detail  to  your  tweens.  Once  you  create  a 
tween  in  the  Timeline,  you  can  control  the  tween  in 
several  different  ways: 

•  Add  or  remove  property  keyframes  for  individual 
properties. 

•  Move  property  keyframes  to  different  frames  within 
the  tween. 

•  Add  or  remove  filters  or  color  effects  and  adjust 
their  settings. 

•  Add  different  preset  eases  to  individual  properties 
and  property  categories. 

•  Create  custom  ease  curves. 

•  Enable  roving  for  individual  property  keyframes  for 
X,  Y,  and  Z  properties.  Roving  allows  the  property 
keyframe  to  move  to  different  frames  or  between 
individual  frames  to  create  smooth  motion. 
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Figure  5  Motion  tween  in  the  Timeline 


Figure  6  Tween  Property  inspector 


Figure  7  Motion  Editor 
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12.  Select  Control  >  Test  Movie  to  test  the  movie. 

13.  Select  File  >  Close  to  close  the  preview  window. 

14.  To  see  all  phases  of  the  tween  at  the  same  time,  click  the 
Onion  Skin  Outline  button  at  the  bottom  of  the  Timeline 

(Figure  8). 

15.  Drag  the  onion  skinning  frame  handles  (they  appear  as 
brackets  with  circles  on  them  at  the  top  of  the  Timeline) 
to  span  the  frames  in  which  the  object  appears. 

The  steps  of  the  tween  are  all  visible  on  the  Stage 

(Figure  9). 

16.  Turn  off  onion  skinning. 

17.  Save  the  movie. 
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Figure  8  Onion  Skin  Outline  button 


Figure  9  Onion  skinning  visible 


Shape  tweens 

In  shape  tweening,  you  draw  a  vector  shape  at  one  specific  frame  in  the  Timeline  and  change  that  shape  or  draw 
another  shape  at  another  specific  frame.  Flash  then  interpolates  the  intermediate  shapes  for  the  frames  in  between, 
creating  the  animation  of  one  shape  morphing  into  another. 

Note:  Shape  tweens  work  best  with  simple  shapes.  Avoid  shapes  with  cutouts  or  negative  spaces  in  them. 
Experiment  with  the  shapes  you  want  to  use  to  determine  the  results.  You  can  use  shape  hints  to  tell  Flash  which 
points  on  the  beginning  shape  should  correspond  to  specific  points  on  the  end  shape.  Shape  tweens  can  use  much 
more  computer  memory  than  motion  tweens,  so  it  is  best  to  use  shape  tweens  sparingly. 
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To  create  a  shape  tween: 

1.  Start  Flash  and  open  a  new  blank  document. 

Frame  1  in  Layer  1  already  contains  a  blank  keyframe. 

2.  Begin  by  adding  a  shape  to  the  Stage: 

Drawn  objects:  Select  a  shape  tool  (rectangle  or  oval) 
and  draw  an  object  on  the  Stage. 

Text:  Select  the  Text  tool  and  type  a  word  or  phrase  on 
the  Stage.  Then  select  the  text  and  select  Modify  > 
Break  Apart.  This  breaks  the  words  into  separate  letters. 
With  the  letters  still  selected,  select  Modify  > 

Break  Apart  again  to  convert  the  letters  into  shapes. 

Outside  images:  Select  File  >  Import  >  Import  To  Stage 
to  import  an  image.  If  the  image  is  a  bitmap,  you  must 
break  it  apart.  If  the  image  is  a  grouped  vector  drawing, 
you  must  ungroup  it  completely.  To  break  apart  a 
bitmap,  select  Modify  >  Break  Apart.  To  ungroup  an 
image,  select  Modify  >  Ungroup. 

Note:  You  might  need  to  select  Modify  >  Break  Apart 
or  Modify  >  Ungroup  multiple  times  until  the  object 
becomes  a  shape,  as  indicated  in  the  Property  inspector. 

3.  Select  frame  10. 

4.  Select  Insert  >  Timeline  >  Keyframe. 

The  tween  will  last  for  10  frames. 

5.  Make  sure  frame  10  is  still  selected  and  make  one  or 
more  of  the  following  changes  to  your  shape: 

Amorphous  shape  change:  Click  the  Stage  with  the 
Selection  tool  to  deselect  the  object.  Bring  the  Selection 
tool  close  to  the  object  to  grab  an  edge.  Drag  the  edge  to 
change  the  shape  of  the  object  (Figure  10). 

Different  shape:  To  morph  between  your  original  shape 
and  a  new  shape,  delete  the  object  in  keyframe  10  and 
draw  a  new  object. 

Note:  Select  Modify  >  Break  Apart  if  the  drawn  object 
is  not  a  shape. 

Text:  To  morph  between  your  original  shape  and  some 
text,  delete  the  object  in  keyframe  10  and  type  the  text 
on  the  Stage.  Select  Modify  >  Break  Apart  until  the  text 
block  is  a  shape,  as  indicated  in  the  Property  inspector. 

Outside  image:  To  morph  between  your  original  shape 
and  a  new  image  you  import,  delete  the  object  in 
keyframe  10  and  select  File  >  Import  to  bring  in  the 
outside  image.  Select  Modify  >  Break  Apart  to  make  the 
object  a  shape,  as  indicated  in  the  Property  inspector. 


Figure  10  Changing  a  shape  with  the  Selection 
tool 
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6.  Click  anywhere  inside  the  tween  span  on  the  Timeline 
(Figure  11)  and  select  Insert  >  Shape  Tween. 

7.  Select  frame  1  on  the  Timeline  (on  the  current  layer). 
This  is  the  start  frame  for  your  animation. 

8.  In  the  T weening  section  of  the  Property  inspector,  adjust 
one  or  more  properties  of  the  Shape  tween  (Figure  12): 

Ease:  Controls  how  fast  the  object  starts  or  ends  the 
shape  tween.  For  example,  a  high  number  begins  the 
tweening  quickly  and  ends  slowly. 

Blend  (Distributive):  Creates  an  animation  in  which  the 
intermediate  shapes  are  smoother  and  more  irregular. 

Blend  (Angular):  Creates  an  animation  that  preserves 
corners  and  straight  lines  in  the  intermediate  shapes. 

9.  Select  Control  >  Test  Movie  to  test  the  movie. 

10.  Select  File  >  Close  to  close  the  preview  window. 

11.  To  see  all  phases  of  the  tween  at  the  same  time,  click  the 
Onion  Skin  button  at  the  bottom  of  the  Timeline. 

12.  Drag  the  frame  handles  (they  appear  as  brackets  with 
circles  on  them  at  the  top  of  the  Timeline)  to  span  the 
first  10  frames  of  Layer  1. 

The  steps  of  the  tween  are  all  visible  on  the  Stage. 

13.  Turn  off  onion  skinning. 

14.  Save  the  movie. 

15.  Close  the  movie. 
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Figure  11  Click  inside  the  tween  span 


Figure  12  Tweening  in  the  Property  inspector 


Classic  tweens 

In  classic  tween  animation,  you  define  keyframes  at  significant  points  in  the  animation  and  Flash  creates  the 
contents  of  frames  between.  The  interpolated  frames  of  a  tweened  animation  appear  as  light  blue  with  an  arrow 
drawn  between  keyframes.  Because  Flash  documents  save  the  shapes  in  each  keyframe,  create  keyframes  only  at 
those  points  in  the  artwork  where  something  changes. 

Classic  tweens  are  similar  to  motion  tweens,  except  they  are  more  complex  and  you  can  create  certain  types  of 
animated  effects  not  possible  with  motion  tweens,  such  as 

•  Work  with  Timeline  effects 

•  Add  an  animation  to  instances,  groups,  or  types 

•  Create  tween  motion  along  a  path 

•  Paste  motion  tween  properties 

•  Apply  custom  ease-in/ease-out  settings 

Note:  Advanced  uses  of  classic  tweens,  such  as  those  listed  here,  will  be  dealt  with  in  greater  detail  in  Unit  6.  The 
following  exercise  outlines  the  steps  for  creating  a  simple  classic  tween,  which  serves  as  a  basic  introduction  to 
classic  tweening  and  the  procedural  differences  between  classic  and  motion  tweening. 
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To  create  a  classic  tween: 

1.  Start  Flash  and  open  a  new  blank  document. 

Frame  1  in  Layer  1  already  contains  a  blank  keyframe. 

2.  Begin  by  adding  a  symbol  to  the  Stage. 

3.  Select  frame  10. 

4.  Select  Insert  >  Timeline  >  Keyframe. 

The  tween  will  last  for  10  frames  (Figure  12). 

5.  Make  sure  frame  10  is  still  selected  and  move  the 
symbol  to  a  new  position  on  the  Stage. 

6.  Click  on  the  tween  span  on  the  Timeline  and  select 
Insert  >  Classic  Tween. 

The  classic  tween  appears  as  light  blue  with  an  arrow 

(Figure  13). 

7.  Select  frame  1  on  the  Timeline  (on  the  current  layer). 
This  is  the  start  frame  for  the  animation. 

8.  Adjust  the  position,  color,  or  scale  of  the  symbol  in  the 
starting  keyframe. 

9.  Select  frame  10,  and  adjust  the  position,  color,  or  scale 
of  the  symbol  to  be  as  you  want  the  animation  to  end. 

You  can  also  adjust  the  properties  of  the  symbol  in  the 
tweening  section  of  the  Property  inspector. 

10.  Select  Control  >  Test  Movie  to  test  the  movie. 

11.  Select  File  >  Close  to  close  the  preview  window. 

12.  Save  the  movie. 

13.  Close  the  movie. 
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Figure  12  Insert  keyframe 


TIMELINE 


MOTION  EDITOR 


Sr  a  □  i  5 


10 


i  i  i  i  i  i  i  i 


si 


Layer  1 


□  .> 


Figure  13  Insert  classic  tween 
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